import type { VNode, ComponentPublicInstance } from "vue";

import { TableProType } from "@/components/TablePro/interface";
import { GridType } from "@/components/Grid/interface/";

// ! 搜索
export namespace SearchType {
  // 表单控件
  export type SearchType = "input" | "number" | "select" | "switch";

  export interface EnumProps {
    label?: string; // 选项框显示的文字
    value?: string | number | boolean | any[]; // 选项框值
    disabled?: boolean; // 是否禁用此选项
    tagType?: string; // 当 tag 为 true 时，此选择会指定 tag 显示类型
    children?: EnumProps[]; // 为树形选择时，可以通过 children 属性指定子选项
    [key: string]: any;
  }

  type SearchRenderScope = {
    searchParam: { [key: string]: any };
    placeholder: string;
    clearable: boolean;
    options: EnumProps[];
    data: EnumProps[];
  };

  // 搜索项配置
  export type SearchProps = {
    el?: SearchType; // 当前项搜索框的类型
    props?: any; // 搜索项参数，根据 element plus 官方文档来传递，该属性所有值会透传到组件
    key?: string; // 当搜索项 key 不为 prop 属性时，可通过 key 指定
    order?: number; // 搜索项排序（从大到小）
    span?: number; // 搜索项所占用的列数，默认为1列
    offset?: number; // 搜索字段左侧偏移列数
    defaultValue?: string | number | boolean | any[]; // 搜索项默认值
    render?: (scope: SearchRenderScope) => VNode; // 自定义搜索内容渲染（tsx语法）
  } & Partial<GridType.RecordGridItem>;

  // 组件 Props
  export interface Props {
    columns: ColumnsProps[]; // 搜索配置列
    searchParam?: { [key: string]: any }; // 搜索参数
    searchCol: number | Record<GridType.BreakPoint, number>;
    search: (params: any) => void; // 搜索方法
    reset: (params: any) => void; // 重置方法
  }
}
